<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>气球跳动示例</title>
    <style>

        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fff;
        }


        .balloon {
            width: 200px;
            animation: bounce 2s ease-in-out infinite;
        }


        @keyframes bounce {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(30px); /* 下移 30px，可自行调整 */
            }
            100% {
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>
<!-- 替换成你的气球图片路径 -->
<img src="ballon.png" alt="balloon" class="balloon">
</body>
</html>
